<template>
  <div class="box">
    <h2>最新文章/New Articles</h2>
    <ul>
      <li v-for="(news, index) in newsList" :key="index"><a @click="openNews(news)">{{news.title}}</a></li>
    </ul>

    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <div class="releaseTime">
        发布日期: {{choiceNews != null? choiceNews.createTime: ''}}
      </div>
      <v-md-preview v-if="open" :text="choiceNews.context"></v-md-preview>
    </el-dialog>

  </div>
</template>

<script>
  import {listNews, getNews, addNews, updateNews, delNews} from '@/business/api/news'

  export default {
    name: 'index',
    data: function() {
      return {
        newsList: [],
        title: '',
        open: false,
        choiceNews: null
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        listNews().then(response => {
          if (response.code === 200) {
            this.newsList = response.rows
            console.log('list', this.newsList)
          }
        })
      },
      openNews(news) {
        this.choiceNews = news;
        this.open = true;
        this.title = news.title;
      }
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .releaseTime{
    text-align: right;
    font-size: 18px;
  }


  /*取消列表样式*/
  li {
    list-style: none;
  }
  .box{
    width: 298px;
    /*height: 198px;*/
    border: 1px solid #ccc;
    /*块级盒子水平居中*/
    margin: 100px auto;
    /*如果一个盒子给了一个padding值，会撑大盒子*/
    padding: 15px;
    /*background: url(../../../../assets/images/line.svg);*/
    /*background-size: ;*/
  }
  .box h2{
    font-size: 18px;
    padding: 5px 0;
    /*底边框*/
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .box ul li{
    height: 40px;
    border-bottom: 1px dashed #ccc;
    line-height: 40px;
    background: url(../../../../assets/images/right.svg) no-repeat 5px center;
    background-size: 20px 20px;
    padding-left: 20px;
  }
  .box ul li a{
    font: normal normal 12px 'Microsoft Yahei';
    color: #333;
    text-decoration: none;

  }
  .box ul li a:hover{
    text-decoration: underline;
  }
</style>
